/*
 * Copyright © 2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import '../../styles/variables.scss';

$border-color: #cccccc;
$table-header-color: #eeeeee;
$table-row-hover-color: #eeeeee;
$file-selected-color: #f5f5f5;
$folder-icon-color: $yellow-01;
$file-icon-color: $blue-03;
$table-font-color: #333333;
$row-disabled-color: #aaaaaa;
$subpanel-height: 46px;
$divider-color: #999999;
$empty-message-link-color: var(--brand-primary-color);

.file-browser-container {
  // Whichever component is using this component will need to
  // overwrite this height styling
  height: calc(100vh - (#{$height-of-footer} + #{$height-of-header}));

  .directory-content-table {
    padding: 0;
    height: calc(100% - 50px - 39px);

    .row {
      margin: 0;

      &.selected {
        background-color: $file-selected-color;
      }
    }

    .content-header {
      border-bottom: 1px solid $border-color;
      border-top: 1px solid $border-color;
      background-color: $table-header-color;
      line-height: 36px;
      height: 36px;
      overflow: hidden;
      font-weight: 600;

      span { cursor: pointer; }
      .sort-caret {
        margin-left: 5px;
      }
    }

    .content-body {
      max-height: calc(100% - 38px);
      overflow-y: auto;

      a:hover { text-decoration: none; }

      .row-container { cursor: pointer; }
      .content-row {
        border-bottom: 1px solid $border-color;
        line-height: 36px;
        color: $table-font-color;

        &:hover { background-color: $table-row-hover-color; }

        &.disabled {
          cursor: not-allowed;
          color: $row-disabled-color;
        }

        .type-icon { margin-right: 5px; }
        .folder-icon { color: $folder-icon-color; }
        .file-icon { color: $file-icon-color; }

        > div {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .empty-search-container {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    width: 100%;

    .empty-search {
      font-size: 18px;
      font-weight: 500;
      margin-left: auto;
      margin-right: auto;
      margin-top: 25vh;
      max-width: 80%;
      word-wrap: break-word;

      hr {
        color: $divider-color;
        background-color: $divider-color;
      }
      span {
        font-size: 14px;
      }
      ul {
        padding: 0;
        list-style: none;
        font-size: 14px;
        .link-text {
          cursor: pointer;
          color: $empty-message-link-color;
        }
      }
    }
  }
  .top-panel {
    .title {
      span.fa.fa-fw.disabled {
        cursor: not-allowed;
      }
    }
  }
}
